<template>
  <div class="menu-box" ref="menuBox">
    <div ref="menuList" class="menu-list" :id="menu.menuName || ''" v-for="menu in menuList" :key="menu.menuId">
      <div ref="menuTitle" class="menu-title">
        {{ menu.menuName || '' }}
      </div>
      <div class="menu-container" v-for="item in menu.menuItem" :key="item.itemId">
        <div class="menu-img"></div>
        <div class="menu-info">
          <div class="info-name">{{item.itemName }}</div>
          <div class="info-sale-okay">
            <span class="sale">月售<span>{{ item.sale }}</span></span>
            <span class="okay">赞<span>{{ item.okay }}</span></span>
          </div>
          <div class="allPrice">
            <span class="nowPrice">￥{{ item.newPrice }}</span>
            <span class="oldPrice">￥{{ item.oldPrice }}</span>
          </div>
          <div class="discount-number">
            <i class="el-icon-time discount-icon"></i>
            <span class="discount">{{ item.discount }}</span>
            <span class="number">{{ item.number }}</span>
          </div>
          </div>
          <div class="menu-btn" @click="addMenuToCart($event, item)">+</div>
        </div>
      </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
    name: 'MenuListItem',
    computed: {
      ...mapState(['menuList'])
    },
    data() {
      return {
        menuTitle: ''
      }
    },
    created() {
      this.getMenuList(),
      this.getDetailList()
    },
    mounted() {
      window.addEventListener('scroll', (e) => {
        let sumHeight = 0;
        for(let i = 0; i < this.$refs.menuList.length; i++) {
          sumHeight += this.$refs.menuList[i].clientHeight;
          if(this.$refs.menuList[0].clientHeight >= e.target.scrollTop + 10) {
            this.$bus.$emit('menuNavClick', this.$refs.menuList[0].id)
          }
          if(sumHeight <= e.target.scrollTop + 10) {
            this.$bus.$emit('menuNavClick', this.$refs.menuList[i + 1].id)
          }
        }
      }, true)
    },
    methods: {
      ...mapActions(['getMenuList']),
      ...mapActions(['getDetailList']),
      addMenuToCart(e, item) {
        e.target.style.backgroundColor = '#6eb';
        e.target.style.transform = `scale(1.2)`
        // 新加数据
        this.$store.commit('AddDetailList', {
            "id": this.$nanoid(),
            "hotel": "永辉饭店0",
            "done": false,
            "name": item.itemName,
            "number": 1,
            "count": item.count+1,
            "price": 8.90,
            "allPrice": 0
        });
        setTimeout(() => {
          e.target.style.backgroundColor = '#F1A30F';
          e.target.style.transform = `scale(1)`
        }, 1000);
      }
    }
}
</script>

<style scoped>
.menu-box {
  width: 70%;
  height: 100%;
}
.menu-list {
  position: relative;
  margin-right: 10px;
}
.menu-title {
  height: 20px;
  padding: 10px;
  margin-left: 10px;
  color: #fff;
  background-color: #eef;
  margin-bottom: 6px;
  margin-top: 6px;
  position: sticky;
  top: 0;
}
.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px auto;
}
.menu-img {
  width: 90PX;
  height: 90PX;
  background-color: aqua;
  margin-left: 10px;
}
.menu-info {
  width: 120px;
}
.info-name, .info-sale-okay, .allPrice {
  margin-bottom: 5px;
}
.info-name {
  font-size: 16px;
  font-weight: bold;
}
.info-sale-okay {
  font-size: 12px;
  color: #B2B2B2;
}
.sale, .nowPrice, .discount-icon, .discount {
  margin-right: 8px;
}
.nowPrice {
  color: #EE4B46;
}
.oldPrice {
  font-size: 12px;
  text-decoration: line-through;
  color: #B2B2B2;
}
.discount-number {
  font-size: 12px;
  color: #BC96AC;
}
.discount-number i {
  font-size: 12px !important;
}
.menu-btn {
  width: 21px;
  height: 21px;
  line-height: 18px;
  border-radius: 50%;
  background-color: #F1A30F;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
}
</style>